<template>
    <input type="text" v-model="text">
    <h4>{{ text }}</h4>
</template>

<script>
import { customRef } from 'vue';

export default {
    name: "Demo",
    setup() {
        // 自定义一个 ref
        function customedRef(value) {
            let timer = null
            return customRef((track, trigger) => ({
                get() { // 客制化 ref 数据被读取时，调用该 get 方法
                    console.log(`customedRef 数据被读取了，我把${value}给他了`)
                    track() // 通知 Vue 追踪数据的变化
                    return value
                },
                set(newValue) { // 客制化ref数据被修改时，调用该 set 方法
                    console.log(`customedRef 数据被修改了，新值为：${newValue}`)
                    clearTimeout(timer)
                    timer = setTimeout(() => {
                        value = newValue
                        trigger() // 通知 Vue 去重新解析模板
                    }, 500)
                }
            }))
        }

        const text = customedRef('test data')

        return {
            text
        }
    },
};
</script>

<style></style>
